import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Button,
  Row,
  Col,
  Modal,
  Form,
  Checkbox,
  Tabs,
  Space,
  Badge,
  Select,
  DatePicker,
  Input,
  Dropdown,
  InputNumber,
  message,
  Menu,
  Drawer,
} from 'antd';
import {
  PlusOutlined,
  DownOutlined,
  ExclamationCircleOutlined,
  CopyOutlined,
} from '@ant-design/icons';
import JobTree from './jobTreeN';
import { FormattedMessage, useIntl } from 'umi';
import moment from 'moment';
import { EmpSelect } from '@/components/FormItemSelect';
import request from '@/utils/request';
import DocHelper from '@/components/DocHelper';
import QuickMenu from '@/components/QuickMenu';
import JobMtlEdit from './jobMtlEdit';
import JobAsmEdit from './jobAsmEdit';
import JobOprEdit from './jobOprEdit';
import 'intro.js/introjs.css';
import 'intro.js/themes/introjs-modern.css';
import IntroJs from 'intro.js';
import QuerySelect from '@/components/QuerySelect';

const { TabPane } = Tabs;
const { confirm } = Modal;
const apiURL = '/api/services/app/JobHead/';

const ViewPage: React.FC<any> = (props) => {
  const [state, setState] = useState<any>({
    loading: false,
    visible: false,
    dataSource: [],
    JobHead: {
      jobCompleted: true,
      jobReleased: true,
      jobClosed: true,
      jobType: null,
    },
    JobAsmbl: {},
    JobMtl: {},
    JobOper: {},
    defTab: '1',
    BomData: {},
  });
  const intl = useIntl();

  const formRef = useRef<any>();

  useEffect(() => {
    const guider = localStorage.getItem('jobEntryGuide');
    if (!guider || guider !== 'ok') {
      startIntro();
    }
  }, []);

  const startIntro = () => {
    const intro1 = IntroJs('#root');
    intro1
      .setOptions({
        prevLabel: intl.formatMessage({ id: 'pages.intro.prev' }),
        nextLabel: intl.formatMessage({ id: 'pages.intro.next' }),
        skipLabel: intl.formatMessage({ id: 'pages.intro.skip' }),
        doneLabel: intl.formatMessage({ id: 'pages.intro.done' }),
      })
      .oncomplete(function () {})
      .onexit(function () {
        message.success(intl.formatMessage({ id: 'pages.intro.success' }));
        localStorage.setItem('jobEntryGuide', 'ok');
      })
      .start();
  };

  const onFinishFailed = (errorInfo: any) => {
    let jobErr = 0;
    let jobMtlErr = 0;
    let jobAsmErr = 0;
    let jobOprErr = 0;
    errorInfo.errorFields.forEach((element: any) => {
      if (element.name[0] === 'JobMtl') {
        jobMtlErr++;
      } else if (element.name[0] === 'JobAsmbl') {
        jobAsmErr++;
      } else if (element.name[0] === 'JobOper') {
        jobOprErr++;
      } else if (element.name[0] === 'JobHead') {
        jobErr++;
      }
      setState((prevState: any) => ({
        ...prevState,
        jobErr,
        jobMtlErr,
        jobAsmErr,
        jobOprErr,
      }));
    });
  };

  const onFinish = (values: any) => {
    const JobHead = values.JobHead;
    saveJobHead(JobHead);
    setState((prevState: any) => ({
      ...prevState,
      jobErr: 0,
      jobMtlErr: 0,
      jobAsmErr: 0,
      jobOprErr: 0,
    }));
  };

  const saveJobHead = (JobHead: any) => {
    const { BomData } = state;
    JobHead.dueDate = JobHead.dueDate?.format('YYYY-MM-DD');
    JobHead.startDate = JobHead.startDate?.format('YYYY-MM-DD');
    let act = 'New';
    let method = 'POST';
    if (JobHead.id) {
      act = 'Update';
      method = 'PUT';
    }
    request(apiURL + act, {
      method: method,
      data: JobHead,
    }).then((response) => {
      if (response && response.success) {
        BomData.JobHead = response.result;
        message.success(intl.formatMessage({ id: 'pages.save.success' }));
        const data = response.result;
        getObj(data);
      }
      setState((prevState: any) => ({ ...prevState, loading: false }));
    });
  };

  const bomTree = useRef<any>(null);

  const onRef = (ref: any) => {
    bomTree.current = ref;
  };

  const setCurrent = (part?: any) => {
    const JobHead: any = {};
    JobHead.partNum = part.PartNum;
    JobHead.partDescription = part.PartDescription;
    JobHead.ium = part.IUM;
    formRef.current.setFieldsValue({ JobHead });
    setState((prevState: any) => ({ ...prevState, partRevs: part.Revs?.split(',') }));
  };

  const getObj = (e: any) => {
    if (e.jobNum) {
      request(apiURL + 'GetBomData', {
        method: 'GET',
        params: { jobNum: e.jobNum },
      }).then((response) => {
        setState((prevState: any) => ({ ...prevState, loading: false }));
        if (response) {
          if (response.success) {
            if (response.result) {
              const BomData = response.result;
              const JobHead = response.result.jobHead;
              setState((prevState: any) => ({ ...prevState, BomData, JobHead }));
              if (JobHead.dueDate) JobHead.dueDate = moment(JobHead.dueDate);
              setCurrentAsmb(JobHead, 'root');
              //bomTree.current.fetchData(BomData, JobHead);
            } else {
              message.error(
                intl.formatMessage({ id: 'pages.error.notExist' }, { jobNum: e.jobNum }),
              );
            }
          } else {
            message.error(response.error.message);
          }
          setState((prevState: any) => ({ ...prevState, loading: false }));
        }
      });
    }
  };

  const fetchBom = () => {
    confirm({
      title: intl.formatMessage({ id: 'pages.confirm.warning' }),
      icon: <ExclamationCircleOutlined />,
      content: intl.formatMessage({ id: 'pages.confirm.fetchBom' }),
      onOk() {
        const formData = formRef.current.getFieldsValue();
        const JobHead = formData.JobHead;
        setState((prevState: any) => ({ ...prevState, loading2: true }));
        request(apiURL + 'FetchDesBom', {
          method: 'POST',
          params: {
            jobNum: JobHead.jobNum,
            partNum: JobHead.partNum,
            revNum: JobHead.revisionNum,
            rootPart: JobHead.partNum,
          },
        }).then((response) => {
          if (response && response.success) {
            getObj(JobHead);
          }
          setState((prevState: any) => ({ ...prevState, loading2: false }));
        });
      },
    });
  };

  const setCurrentAsmb = (item: any, type: string, node: any = null) => {
    if (type === 'mtl') {
      setState((prevState: any) => ({ ...prevState, JobMtl: item, defTab: '2' }));
    } else if (type === 'asm') {
      const boos: any = node?.children?.filter((o: any) => o.type === 'boo');
      setState((prevState: any) => ({ ...prevState, JobAsmbl: item, booList: boos, defTab: '3' }));
    } else if (type === 'boo') {
      setState((prevState: any) => ({ ...prevState, JobOper: item, defTab: '4' }));
    } else {
      setState((prevState: any) => ({ ...prevState, JobHead: item }));
      formRef.current.setFieldsValue({ JobHead: item });
    }
  };

  const tabSwitch = (key: any) => {
    setState((prevState: any) => ({ ...prevState, defTab: key }));
    const { BomData } = state;
    if (BomData) {
      BomData.freshTime = Date.now();
      setState((prevState: any) => ({ ...prevState, BomData }));
    }
  };

  const resetForm = () => {
    formRef.current.resetFields();
    setState({
      BomData: [],
      JobHead: {
        jobCompleted: false,
        jobReleased: false,
        jobClosed: false,
      },
      jobErr: 0,
      jobMtlErr: 0,
      jobAsmErr: 0,
      jobOprErr: 0,
    });
    bomTree.current?.clearData();
  };

  const handleMenuClick = (e: any) => {
    const { JobHead } = state;
    if (e.key === 'new') {
      resetForm();
    } else {
      if (
        JobHead &&
        JobHead.jobNum != '' &&
        JobHead.jobNum != undefined &&
        JobHead.jobNum != null
      ) {
        setState((prevState: any) => ({ ...prevState, loading: true }));
        request(apiURL + 'CopyJob', {
          method: 'POST',
          params: { jobNum: JobHead.jobNum },
        }).then((response) => {
          if (response.success) {
            message.success(intl.formatMessage({ id: 'pages.copy.success' }));
            getObj(response.result);
            setState((prevState: any) => ({ ...prevState, loading: false }));
          }
        });
      }
      else{
        message.error(intl.formatMessage({id: 'pages.selectOneJob'}));
      }
    }
    setState((prevState: any) => ({ ...prevState, defTab: '1' }));
  };

  const delObj = () => {
    const { JobHead } = state;
    confirm({
      title: intl.formatMessage({ id: 'pages.confirm.warning' }),
      icon: <ExclamationCircleOutlined />,
      content: intl.formatMessage({ id: 'pages.confirm.delete' }),
      onOk() {
        request(apiURL + 'DelBatch', {
          method: 'POST',
          data: [JobHead.id],
        }).then(() => {
          resetForm();
        });
      },
    });
  };

  const setSoCurrent = (item: any) => {
    const obj = formRef.current.getFieldsValue();
    if (obj.JobHead.partNum !== item.PartNum) {
      message.warning(intl.formatMessage({ id: 'pages.warning.orderProductCodeMismatch' }));
      return;
    }
    const model = {
      orderNum: item.OrderNum,
      orderLine: item.OrderLine,
      orderRelNum: item.OrderRelNum,
      prodQty: item.OurReqQty,
      dueDate: moment(item.RequestDate),
    };
    formRef.current.setFieldsValue({ JobHead: model });
  };

  const setJobHeadParent = (item: any) => {
    const obj = formRef.current.getFieldsValue();
    if (obj.JobHead.jobNum === item.JobNum) {
      message.warning(intl.formatMessage({ id: 'pages.warning.selectCurrentJob' }));
      return;
    }
    if (obj.JobHead.partNum !== item.PartNum) {
      message.warning(intl.formatMessage({ id: 'pages.warning.productCodeMismatch' }));
      return;
    }
    const JobHead = {
      parentJobNum: item.JobNum,
      parentJobMtl: item.MtlSeq,
      parentJobAsmbl: item.AssemblySeq,
      prodQty: item.RequiredQty,
    };
    formRef.current.setFieldsValue({ JobHead });
  };

  const switchDraw = () => {
    const { visible } = state;
    setState((prevState: any) => ({ ...prevState, visible: !visible }));
  };

  const releaseJob = (e: any) => {
    const { JobHead } = state;
    if (JobHead.id) {
      request(apiURL + 'ReleaseJob', {
        method: 'POST',
        params: { id: JobHead.id, val: e.target.checked },
      }).then((response) => {
        if (response.success) {
          getObj(JobHead);
        }
      });
    }
  };

  const setAutoJob = (e: any) => {
    const isAuto = e.target.checked;
    const JobHead = {
      jobNum: isAuto ? '0' : '',
    };
    setState((prevState: any) => ({ ...prevState, isAuto }));
    formRef.current.setFieldsValue({ JobHead });
  };

  const editBomData = (act: string, api: string, data: any) => {
    const { BomData, JobHead } = state;
    if (act === 'New') {
      if (api === 'JobMtl') {
        BomData.mtls.push(data);
        setState((prevState: any) => ({ ...prevState, JobMtl: data }));
      } else if (api === 'JobOper') {
        BomData.boos.push(data);
        setState((prevState: any) => ({ ...prevState, JobOper: data }));
      } else {
        BomData.boms.push(data);
        setState((prevState: any) => ({ ...prevState, JobAsmbl: data }));
      }
    } else if (act === 'Del') {
      if (api === 'JobMtl') {
        BomData.mtls = data;
      } else if (api === 'JobOper') {
        BomData.boos = data;
      } else {
        BomData.boms = data;
      }
    } else {
      if (api === 'JobMtl') {
        const items = BomData.mtls.filter((o: any) => o.id !== data.id);
        items.push(data);
        BomData.mtls = items;
        setState((prevState: any) => ({ ...prevState, JobMtl: data }));
      } else if (api === 'JobOper') {
        const items = BomData.boos.filter((o: any) => o.id !== data.id);
        items.push(data);
        BomData.boos = items;
        setState((prevState: any) => ({ ...prevState, JobOper: data }));
      } else {
        const items = BomData.boms.filter((o: any) => o.id !== data.id);
        items.push(data);
        BomData.boms = items;
        setState((prevState: any) => ({ ...prevState, JobAsmbl: data }));
      }
    }
    setState((prevState: any) => ({ ...prevState, BomData }));
    bomTree.current.fetchData(BomData, JobHead);
  };

  const layout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 15 },
  };

  const {
    BomData,
    defTab,
    loading2,
    JobHead,
    JobAsmbl,
    JobOper,
    JobMtl,
    jobErr,
    jobMtlErr,
    jobAsmErr,
    jobOprErr,
    isAuto,
  } = state;

  const jobType = state?.jobType || JobHead.jobType;
  const disEdit = JobHead.jobCompleted || JobHead.jobClosed || JobHead.jobReleased;
  const disFetch = JobHead.jobReleased || JobHead.jobFirm;

  const selectRev = (
    <Select placeholder={<FormattedMessage id="pages.revision.select" />}>
      {state.partRevs?.map((item: any) => {
        return (
          <Select.Option key={item} value={item}>
            {item}
          </Select.Option>
        );
      })}
    </Select>
  );

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Drawer
        width={600}
        placement="right"
        closable={false}
        visible={state.visible}
        onClose={switchDraw}
        getContainer={false}
        mask={false}
        maskClosable={false}
        footer={
          <Button type="primary" onClick={switchDraw}>
            <FormattedMessage id="pages.close" />
          </Button>
        }
      >
        <JobTree
          onRef={onRef}
          BomData={BomData}
          JobData={JobHead}
          setCurrentAsmb={setCurrentAsmb}
        />
      </Drawer>

      <Row gutter={[16, 16]}>
        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
          <Card>
            <Space data-step="1" data-intro="跟随小O来一步步创建工单吧，首先点击这里新建工单。">
              <Dropdown
                overlay={
                  <Menu onClick={handleMenuClick}>
                    <Menu.Item key="new" icon={<PlusOutlined />}>
                      <span>
                        <FormattedMessage id="pages.new" />
                      </span>
                    </Menu.Item>
                    <Menu.Item key="copy" icon={<CopyOutlined />} disabled={JobHead.jobNum === '0'}>
                      <FormattedMessage id="pages.copyJob" />
                    </Menu.Item>
                  </Menu>
                }
              >
                <Button type="primary" icon={<PlusOutlined />}>
                  <span>
                    <FormattedMessage id="pages.new" />
                  </span>{' '}
                  <DownOutlined />
                </Button>
              </Dropdown>
              <Button
                key="3"
                type="primary"
                onClick={fetchBom}
                loading={loading2}
                disabled={disFetch}
                data-step="7"
                data-intro="工单新建完毕，可以点击此按钮提取BOM。前提是在工艺制造设计中将BOM搭建完毕。"
              >
                <FormattedMessage id="pages.fetchBom" />
              </Button>
              <Button
                key="5"
                type="primary"
                onClick={switchDraw}
                data-step="8"
                data-intro="打开的订单点击此按钮查看工单BOM结构。"
              >
                <FormattedMessage id="pages.bom" />
              </Button>
              <QuickMenu path="/manufacture/jobEntry" icon="icon-services" title="pages.JobEntry" />
              <DocHelper page="up3e60" />
            </Space>
            <Tabs defaultActiveKey={defTab} activeKey={defTab} onChange={tabSwitch}>
              <TabPane
                tab={
                  <Badge count={jobErr}>
                    <FormattedMessage id="pages.jobs" />
                  </Badge>
                }
                key="1"
              >
                <Form {...layout} ref={formRef} onFinish={onFinish} onFinishFailed={onFinishFailed}>
                  <Form.Item name={['JobHead', 'id']} hidden={true}>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.jobNum" />}
                    required
                    style={{ marginBottom: 0 }}
                  >
                    <Input.Group compact>
                      <Form.Item
                        name={['JobHead', 'jobNum']}
                        rules={[
                          {
                            required: true,
                            message: <FormattedMessage id="pages.jobNum.required" />,
                          },
                        ]}
                      >
                        <Input disabled={isAuto || JobHead.id} />
                      </Form.Item>
                      <Form.Item noStyle>
                        <QuerySelect
                          width={780}
                          sysReportName="JobSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.search" />}
                          btntype="primary"
                          setCurrent={(e: any) => getObj(e)}
                          scroll={{ x: 'max-content', y: '280px' }}
                          search={{
                            filterType: 'light',
                          }}
                        />
                      </Form.Item>
                      <Form.Item
                        name={['JobHead', 'isAuto']}
                        valuePropName="checked"
                        style={{ marginBottom: 0, marginLeft: 16 }}
                      >
                        <Checkbox
                          data-step="2"
                          data-intro="填写工单号，也可以选择勾选自动编号。"
                          onChange={(e) => setAutoJob(e)}
                        >
                          <FormattedMessage id="pages.autoNumber" />
                        </Checkbox>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item label={<FormattedMessage id="pages.jobMtl" />} required>
                    <Input.Group compact>
                      <Form.Item
                        noStyle
                        name={['JobHead', 'partNum']}
                        rules={[
                          {
                            required: true,
                            message: <FormattedMessage id="pages.partNum.required" />,
                          },
                        ]}
                      >
                        <Input style={{ width: 120 }} disabled />
                      </Form.Item>
                      <Form.Item noStyle>
                        <QuerySelect
                          width={680}
                          sysReportName="PartSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.partNum" />}
                          btntype="primary"
                          setCurrent={setCurrent}
                          scroll={{ x: 'max-content', y: '200px' }}
                          params={{ InActive: 'false' }}
                        />
                      </Form.Item>
                      <Form.Item noStyle name={['JobHead', 'revisionNum']}>
                        {selectRev}
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item
                    name={['JobHead', 'partDescription']}
                    label={<FormattedMessage id="pages.partDescription" />}
                    rules={[
                      {
                        required: true,
                        message: <FormattedMessage id="pages.partDescription.required" />,
                      },
                    ]}
                  >
                    <Input disabled />
                  </Form.Item>
                  <EmpSelect
                    showSearch
                    width={200}
                    name={['JobHead', 'personID']}
                    label={<FormattedMessage id="pages.pmc" />}
                    params={{
                      deptCode: 'PMC',
                    }}
                    tooltip={intl.formatMessage({id:'pages.addEmployeeInDepartment(PMC)'})}
                  />
                  <Form.Item
                    name={['JobHead', 'jobType']}
                    label={<FormattedMessage id="pages.jobType" />}
                    rules={[
                      { required: true, message: <FormattedMessage id="pages.jobType.required" /> },
                    ]}
                  >
                    <Select
                      style={{ width: 200 }}
                      placeholder="请选择工单类型"
                      onChange={(e) => setState({ jobType: e })}
                      data-step="4"
                      data-intro="选择工单类型。订单生产需要选择对应的订单，工单生产需要选择为哪个工单生产。下面带红星的都是需要填写的。"
                    >
                      <Select.Option value="MTO">
                        <FormattedMessage id="pages.MTO" />
                      </Select.Option>
                      <Select.Option value="MTS">
                        <FormattedMessage id="pages.MTS" />
                      </Select.Option>
                      <Select.Option value="MTJ">
                        <FormattedMessage id="pages.MTJ" />
                      </Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 3 }}>
                    <Input.Group compact>
                      <Form.Item name={['JobHead', 'jobFirm']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.jobFirm" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['JobHead', 'jobClosed']} valuePropName="checked">
                        <Checkbox disabled>
                          <FormattedMessage id="pages.jobClosed" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['JobHead', 'jobCompleted']} valuePropName="checked">
                        <Checkbox disabled>
                          <FormattedMessage id="pages.jobCompleted" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['JobHead', 'jobReleased']} valuePropName="checked">
                        <Checkbox onChange={releaseJob}>
                          <FormattedMessage id="pages.jobReleased" />
                        </Checkbox>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item
                    name={['JobHead', 'dueDate']}
                    label={<FormattedMessage id="pages.requestDate" />}
                    rules={[
                      {
                        required: true,
                        message: <FormattedMessage id="pages.requestDate.required" />,
                      },
                    ]}
                  >
                    <DatePicker />
                  </Form.Item>
                  <Form.Item label={<FormattedMessage id="pages.prodQty" />} required>
                    <Input.Group compact>
                      <Form.Item
                        noStyle
                        name={['JobHead', 'prodQty']}
                        rules={[
                          {
                            required: true,
                            message: <FormattedMessage id="pages.prodQty.required" />,
                          },
                        ]}
                      >
                        <InputNumber min={1} />
                      </Form.Item>
                      <Form.Item
                        noStyle
                        name={['JobHead', 'ium']}
                        rules={[
                          { required: true, message: <FormattedMessage id="pages.IUM.required" /> },
                        ]}
                      >
                        <Input disabled style={{ width: 80 }} placeholder="IUM" />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item label={<FormattedMessage id="pages.orderNum" />}>
                    <Input.Group compact>
                      <Form.Item noStyle name={['JobHead', 'orderNum']}>
                        <Input style={{ width: 100 }} disabled={jobType != 'MTO'} />
                      </Form.Item>
                      <Form.Item noStyle name={['JobHead', 'orderLine']}>
                        <Input style={{ width: 50 }} disabled={jobType != 'MTO'} />
                      </Form.Item>
                      <Form.Item noStyle name={['JobHead', 'orderRelNum']}>
                        <Input style={{ width: 50 }} disabled={jobType != 'MTO'} />
                      </Form.Item>
                      <Form.Item noStyle>
                        <QuerySelect
                          width={780}
                          sysReportName="SoSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.orderNum" />}
                          btntype="primary"
                          setCurrent={setSoCurrent}
                          scroll={{ x: 'max-content', y: '200px' }}
                          search={{
                            filterType: 'light',
                          }}
                          disabled={jobType != 'MTO'}
                          params={{
                            OpenOrder: 1,
                            VoidOrder: 0,
                            Approve: 1,
                            OpenRelease: 1,
                            BuyToOrder: 0,
                          }}
                        />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item label={<FormattedMessage id="pages.parentJobNum" />}>
                    <Input.Group compact>
                      <Form.Item noStyle name={['JobHead', 'parentJobNum']}>
                        <Input style={{ width: 100 }} disabled={jobType != 'MTJ'} />
                      </Form.Item>
                      <Form.Item noStyle name={['JobHead', 'parentJobAsmbl']}>
                        <Input style={{ width: 50 }} disabled={jobType != 'MTJ'} />
                      </Form.Item>
                      <Form.Item noStyle name={['JobHead', 'parentJobMtl']}>
                        <Input style={{ width: 50 }} disabled={jobType != 'MTJ'} />
                      </Form.Item>
                      <Form.Item noStyle>
                        <QuerySelect
                          width={780}
                          sysReportName="JobMtlSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.jobNum" />}
                          btntype="primary"
                          setCurrent={setJobHeadParent}
                          scroll={{ x: 'max-content', y: '200px' }}
                          disabled={jobType != 'MTJ'}
                          params={{
                            PartNum: JobHead.partNum,
                          }}
                        />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item wrapperCol={{ offset: layout.labelCol.span }}>
                    <Space data-step="5" data-intro="最后保存工单！">
                      <Button
                        type="primary"
                        htmlType="submit"
                        loading={state.loading}
                        disabled={disEdit}
                      >
                        <FormattedMessage id="pages.save" />
                      </Button>
                      <Button
                        type="primary"
                        danger
                        onClick={delObj}
                        disabled={disEdit || !JobHead?.id}
                      >
                        <FormattedMessage id="pages.delete" />
                      </Button>
                      <Button onClick={resetForm}>
                        <FormattedMessage id="pages.reset" />
                      </Button>
                    </Space>
                  </Form.Item>
                </Form>
              </TabPane>
              <TabPane
                tab={
                  <Badge count={jobMtlErr}>
                    <FormattedMessage id="pages.jobMtl" />
                  </Badge>
                }
                key="2"
                data-step="6"
                data-intro="保存完工单，继续在此处选择填写工单物料、半成品和工序"
              >
                <JobMtlEdit datas={BomData} record={JobMtl} reloadData={editBomData} />
              </TabPane>
              <TabPane
                tab={
                  <Badge count={jobAsmErr}>
                    <FormattedMessage id="pages.JobAsmbl" />
                  </Badge>
                }
                key="3"
              >
                <JobAsmEdit datas={BomData} record={JobAsmbl} reloadData={editBomData} />
              </TabPane>
              <TabPane
                tab={
                  <Badge count={jobOprErr}>
                    <FormattedMessage id="pages.jobOper" />
                  </Badge>
                }
                key="4"
              >
                <JobOprEdit datas={BomData} record={JobOper} reloadData={editBomData} />
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </PageHeaderWrapper>
  );
};

export default ViewPage;
